<template>
    <div class="layout">
        <el-container class="container">
            <el-header class="header">
                <div class="logo">BreadBlog</div>
                <div class="user-info">
                    <span>欢迎回来,</span>
                    <el-dropdown trigger="click">
                        <span class="nick-name">
                            {{ storedUsername }}
                            <span class="iconfont icon-close"></span>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="goUserInfo"> 个人信息</el-dropdown-item>
                                <el-dropdown-item @click="exitInfo">退出</el-dropdown-item>
                                <el-dropdown-item>还没想好</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <div class="avatar"><img :src="cover" alt="views"></div>


                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" class="left-aside">
                    <div>
                        <el-button class="post-btn">发布</el-button>
                    </div>
                    <div class="menu-panel">
                        <ul>
                            <li v-for="(menu, index) in menuList" :key="index">
                                <span class="menu-title-p" @click="openClose(index)">
                                    <span :class="['iconfont', menu.icon]"></span>
                                    <span class="menu-title">{{ menu.title }}</span>
                                    <span :class="['iconfont', 'open-close', menu.open ? 'icon-open' : 'icon-close']"></span>
                                </span>

                                <ul class="sub-menu" v-show="menu.open">
                                    <li v-for="subMenu in menu.children" :key="subMenu.id">
                                        <router-link :to="subMenu.path"
                                                     :class="['sub-menu-item', activePath == subMenu.path ? 'active' : '']">
                                            {{ subMenu.title
                                            }}
                                        </router-link>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </el-aside>
                <el-main class="right-main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
    import {ref, onMounted, watch} from 'vue';
    import {useRouter, useRoute} from 'vue-router';

    const router = useRouter();
    const route = useRoute();
    const storedUsername = ref('');
    const cover = ref('');
    onMounted(() => {
        // 获取令牌信息
        const jwtToken = localStorage.getItem('jwtToken');

        if (jwtToken) {
            // 解码JWT令牌（假设它是一个包含用户名的 JSON）
            const tokenData = JSON.parse(decodeURIComponent(escape(atob(jwtToken.split('.')[1]))));
            console.log('Token Data:', tokenData);
            // 设置用户名
            storedUsername.value = tokenData.username;
            // 设置用户头像
            cover.value = tokenData.cover; // 假设 avatarUrl 是JWT中的字段名称
        }
    });
    const menuList = ref([
        {
            title: "博客",
            icon: "icon-blog",
            open: true,
            children: [
                {
                    title: "博客管理",
                    path: "/blog/list",
                },
                {
                    title: "分类管理",
                    path: "/blog/category",
                },
            ],
        }, {
            title: "专题和用户",
            icon: "icon-zhuanti",
            open: true,
            children: [
                {
                    title: "专题管理",
                    path: "/special/list",
                },
                {
                    title: "用户管理",
                    path: "/special/user",
                },
            ],
        },
        {
            title: "设置",
            icon: "icon-settings",
            open: true,
            children: [
                {
                    title: "个人信息管理",
                    path: "/settings/my",
                },
                /* {
                    title: "系统设置",
                    path: "/settings/sysSetting",
                }, */
                {
                    title: "访客端",
                    path: "/homePage",
                },
            ],
        },
        {
            title: "垃圾箱",
            icon: "icon-delete",
            open: true,
            children: [
                {
                    title: "垃圾箱",
                    path: "/blog/recover",
                },
            ],
        },
    ],)
    const openClose = (index) => {
        const open = menuList.value[index].open;
        menuList.value[index].open = !open;
    }
    const activePath = ref(null)
    watch(route, (newVal, oldVal) => {
        activePath.value = newVal.path;
    }, {immediate: true, deep: true});
    const goUserInfo = () => {
        router.push("../settings/my")
    }
    const exitInfo = () => {
        if (confirm("确定要退出吗？")) {
            // 如果用户点击确定，执行路由跳转
            localStorage.removeItem('jwtToken'); // 清空JWT令牌
            router.push('/login'); // 这里要根据你的路由配置来设置跳转路径
        }
    }

</script>

<style lang="scss">
    .layout {
        .header {
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .logo {
                font-size: 30px;
                color: #abe91a;
            }

            .user-info {
                display: flex;
                align-items: center;
                font-size: 20px;

                .nick-name {
                    cursor: pointer;
                    color: rgb(12, 157, 214);
                    font-size: 20px;
                }

                .icon-close {
                    font-size: 14px;
                }

                .avatar {
                    margin-left: 10px;
                    width: 100px;

                    img {
                        border-radius: 100px;
                        width: 70px;
                    }
                }
            }

        }

        .container {
            padding-top: 10px;
            background: #f5f6f7;
            height: calc(100vh - 60px);


            .left-aside {
                padding: 0px 15px;
                width: 280px;

                .post-btn {
                    background: #cf650e;
                    color: #fff;
                    height: 40px;
                    width: 100%;
                }

                .menu-panel {
                    margin-top: 5px;

                    ul,
                    li {
                        padding: 0px;
                        margin: 0px;
                        list-style: none;
                    }

                    .menu-title-p {
                        padding: 0px 5px;
                        line-height: 45px;
                        cursor: pointer; //将鼠标放上去是手形状
                        display: flex;

                        .iconfont {
                            font-size: 18px;
                            color: #91949a;
                        }

                        .menu-title {
                            flex: 1;
                            margin-left: 10px;
                        }

                        .open-close {
                            width: 20px;
                            font-size: 16px;
                        }
                    }

                    .menu-title-p:hover {
                        background: #ddd;
                    }

                    .sub-menu {
                        font-size: 14px;

                        .sub-menu-item {
                            padding: 0px 10px 0px 33px;
                            display: block;
                            cursor: pointer;
                            line-height: 30px;
                            text-decoration: none;
                            color: #3f4042;
                        }

                        .active {
                            background: #ddd;
                        }

                        .sub-menu-item:hover {
                            background: #ddd;
                        }
                    }

                }
            }

            .right-main {
                position: relative;
                background: #fff;
                padding: 20px 10px 10px 10px;
            }
        }
    }</style>
